阿嬤都看得懂的切版在幹嘛

今天，讓我們一起拿出童年回憶－－貼紙簿。

如果你不是阿嬤而是乖孫，那我解釋一下，貼紙簿是一種黃色膠質的紙所製作的筆記本。把貼紙貼上去後，可以輕易撕下來重貼，不會弄壞貼紙，也不會弄壞筆記本。在我們童年時代，父母和老師們很喜歡發貼紙當作獎賞，所以我們就可以用貼紙簿蒐集起來。

因為這些貼紙可以撕下來重貼，所以我們可以輕易地改變配置。那麼，假使你要告訴小劉，這些貼紙怎麼放在貼紙簿上，你會怎麼作呢？我們先來看第一張好了。

呃嗯，我可能會告訴小劉，這張貼紙的邊邊，距離貼紙簿紙頁的左側邊邊與上方邊邊多少公分。

那第二張呢？這時候，我應該會告訴小劉：

1. 這張貼紙是放在前一張貼紙的右邊還是下面，以及
2. 這張貼紙的邊邊，距離前一張貼紙的邊邊多少公分。第三張、第四張以此類推。

有發現嗎？我們決定每張貼紙位置的方式，是

1. 這些貼紙和其他貼紙的位置關係，以及
2. 這些貼紙的邊邊和包含它的紙頁的邊邊距離多遠，或這些貼紙的邊邊和其他貼紙的邊邊距離多遠。

如果我們把每張貼紙當成區塊元素，會怎麼決定

1. 這個元素和其他元素的位置關係，以及
2. 這個元素和其他元素的實際距離
   呢？

沒錯，就是設定

1. display：想放在右側，值就是 inline-block，放在下面就是 block；以及
2. 昨天介紹的 margin。

例如，我們可以想一想，如果我們要把這些貼紙變成下面這樣，會怎麼處理呢？

等等，在開始切這個貼紙簿頁面以前，你應該會問：為什麼今天突然開始做貼紙簿了？這種醜不啦嘰的網頁，根本不會有人想看啊！

沒錯，在現實生活中，不會有任何網站長成這種色塊的樣子。但是，只要我們把這些貼紙美化，或者加上內容以後，就會是我們平常在用的網站囉。如果不相信，讓我們看看幾個案例。

1. CNN：
   
   什麼，你說看起來完全不像？人家的網頁漂亮多了!? 沒關係，那如果是這樣呢？
   
   有沒有覺得 87% 像了呢？
2. 蝦皮購物：
   
   怎麼樣？有看出來這和我們的貼紙簿相似的地方嗎？這次是不是比較明顯了呢？沒錯，就是這麼像：
   
3. Nike：
   
   沒這麼像，但是還是很像對吧？
   

沒錯，其實我們可以把各種絢麗的網站，都看做古早時代的貼紙簿。當我們在製作網頁的時候，會先把這些大張的貼紙，這些大的區塊元素先寫出來，把整個畫面切割成幾個主要區域，然後再把圖片與文字這些內容填進去。

這個把整個版面切成各個區塊的任務，我們就叫作「切版」。我們通常會先抓出幾個主要區域，例如上面的大色塊。切完主要區域以後，我們會再把每個主要區域切成更細的區塊，例如圖片的區塊、文字的區塊、或按鈕的區塊。

我們上面看見的貼紙簿頁面，可以說是最經典的版面配置。粉紅貼紙區塊我們稱作「頁首」 (header)，中間橘色貼紙的區塊稱作「主要區域」 (main)，而最後的綠色貼紙區塊稱作「頁尾」(footer)。有些網頁可能會有側邊的區塊，我們稱作「側欄」(sidebar)。這些區域各自有些約定俗成的功能。

1. 頁首：這個區域通常有企業的 Logo，點擊後會回到首頁，也有可以通往各個主要功能的頁籤。由於頁首非常重要，許多時候也會持續懸浮在視窗頂部，無論使用者往下捲動到網頁的哪個部分。
2. 主要區域：主要內容的呈現區塊，通常會再切分成更多區塊，以利呈現內容。
3. 頁尾：通常會放上企業的聯絡方式，以及社群網站的連結。許多時候，也會放上整個網站的綱要，以利使用者快速前往使用任何功能。
4. 側欄：現在的網站比較少出現側欄，不過在沒有頁尾的網頁中，通常會用來放上較為次要的功能連結。讓我們看看臉書網頁版的版面配置：
   
   可以看見左右側欄主要用作次要功能、捷徑、廣告、與即時通訊。

所以，這個貼紙簿的練習，實際上就是未來我們切版的起手式。當我們能夠把每個區塊都放在正確的位置上以後，才有辦法開始讓瀏覽器精確地繪製出整個網頁的全貌。